import React, { Fragment, useState } from 'react';
import { Tabs } from 'antd';
import QueryPage from '@/components/QueryPage';
import { withRoutePage } from '@/utils/enhanceUtils';
import MonthStat from './MonthStat';
import AllStat from './AllStat';
import styles from './index.less';

const { TabPane } = Tabs;

const List = props => {
    const [activeKey, setActiveKey] = useState('1');
    return (
        <Fragment>
            <QueryPage
                searchBoxStyle={styles.searchBox}
                form={
                    <Tabs
                        size="large"
                        activeKey={activeKey}
                        onChange={key => setActiveKey(key)}
                        style={{ padding: '0 16px' }}
                        animated={false}
                    >
                        <TabPane tab="月统计" key="1">
                            <MonthStat activeKey={activeKey} {...props} />
                        </TabPane>
                        <TabPane tab="汇总统计" key="2">
                            <AllStat activeKey={activeKey} {...props} />
                        </TabPane>
                    </Tabs>
                }
            />
        </Fragment>
    );
};

export default withRoutePage(List);
